<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 当页面加载完成时进行的操作
        window.onload = function() {
            if (memo.checked) {
                userName.value = localStorage.getItem("userName");
                psd.value = localStorage.getItem("passWord");
            }

        }
    </script>
    <style>
        body {
            background-color: rgb(31, 31, 84);
        }
        
        .box {
            text-align: center;
            width: 400px;
            height: 250px;
            margin: auto;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        用户名：<input type="text" class="user"><br> 密码： <input type="password" class="psd"><br>
        <input type="checkbox" class="memory" checked>记住密码<br>
        <input type="button" value="登录" class="login">
    </div>
    <script>
        // localStorage 永久存储
        // sessionStorage 临时存储
        // cookie  存储用户信息
        console.log(localStorage);
        localStorage.setItem("userName", "zxf");
        localStorage.setItem("passWord", "123456");
        console.log(localStorage.getItem("userName"));
        //获取元素
        var userName = document.getElementsByClassName("user")[0];
        var psd = document.getElementsByClassName("psd")[0];
        var memo = document.getElementsByClassName("memory")[0];
        var login = document.getElementsByClassName("login")[0];
        login.onclick = function() {
            if (userName.value == localStorage.getItem("userName") && psd.value == localStorage.getItem("passWord")) {
                // 通过事件跳转
                location.href = "./分页.html";
            } else {
                alert("用户名或密码不正确，请重新登录")
            }
        }
    </script>
</body>

</html>